<template>
	<view>
		<uni-nav-bar shadow :title="title" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#FFFFFF" :shadow="false" left-icon="left"></uni-nav-bar>
		<view class="container">
			<view style="position: relative;">
				<video id="myVideo" :src="srcs" @play='playVideo' @loadedmetadata='loadedmetadata'
					@timeupdate='playTimes' @error="videoErrorCallback" controls>
					<view class="head-top">
						<image class="image" src="../../static/images/yicha/logo.png" mode=""></image>
					</view>
					<view class="video-infor">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view>
					<!-- <view class="video-infor-2">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view> -->
				</video>
			</view>
			<view class="detail-info">
				<u-parse :html="detailInfo"></u-parse>
			</view>
			<share-modal :userid='shoreId' ref="ShareModal"></share-modal>
		</view>
		<uni-popup is-mask-click='false' :mask-click='false' style="background-color:rgba(0,0,0,.4); z-index: 101" id="SureSubmit"
			ref="SureSubmit" type="dialog">
			<view class="floatcontainer">
				<view class="text">
					当前视频未购买，是否先购买？
				</view>

				<view class="btnContainer">
					<button type="default" @click="$refs.SureSubmit.close()">取消</button>
					<button type="primary" @click="buy()" style="background: #8CBF6B;color: #fff;">购买</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup is-mask-click='false' :mask-click='false' style="background-color:rgba(0,0,0,.4); z-index: 102" id="SureSubmits"
			ref="SureSubmits" type="dialog">
			<view class="floatcontainer">
				<radio-group style="display: flex;margin: 10px;align-items: center;" name="sex" @change="radioChange">
					<label>支付方式：</label>
					<label style="display: flex;align-items: center;">
						<radio style="margin: 0 10px;" value="wechat" checked="checked" />


						<image style="width: 18px;height: 18px;" src="../../static/images/bank/WECHAT.png" mode="">
						</image> <text style="line-height: 30px;">微信</text>

						<radio style="margin: 0 10px;" value="alipay" />
						<image style="width: 18px;height: 18px;" src="../../static/images/bank/ALIPAY.png" mode="">
						</image> <text>支付宝</text>
					</label>
				</radio-group>

				<view class="btnContainer">
					<button type="default" @click="$wanlshop.back(1)">退出</button>
					<button type="primary" @click="sure()" style="background: #8CBF6B;color: #fff;">确认</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup is-mask-click='false' :mask-click='false' style="background-color:rgba(0,0,0,.4); z-index: 103" id="SureSubmits"
			ref="payPopup" type="dialog">
			<view class="floatcontainer2">
				<view class="title">
					请用支付宝扫码支付
				</view>
				<canvas ref="canvas" canvas-id="qrcode" style="width: 180px;height:180px;" class="canvas"
					id="qrcode"></canvas>
			</view>
		</uni-popup>
		<view v-show="!isSharePage" @tap="$wanlshop.auth('/pages/teacher/userCard')" class="changeCardBtn">
			更改名片
		</view>
		<ad-modal ref="adModal" @jumpAd='jumpAd'></ad-modal>
	</view>

</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	import jssdk from '@/common/libs/jssdk.js'
	import shareModal from '@/pages/teacher/components/shareModal.vue'
	import share from '@/shopro/share/index.js'
	import adModal from '@/pages/teacher/components/adModal.vue'
	export default {
		components: {
			shareModal,
			adModal
		},
		data() {
			return {
				user: {},
				username: '',
				id: '',
				title: '',
				AllList: [],
				currentPage: '1',
				srcs: "",
				videoContext: {},
				alreadyBuy: 0,
				videoInfo: {},
				chosedValue: 'wechat',
				isSharePage: false,
				hideAd: true,
				playTime: 0,
				shorePic: '',
				shoreDesc: "",
				freeTime: 0,
				shoreId: '',
				detailInfo: "",
			}
		},
		onLoad: function(option) {
			this.id = option.id;
			this.title = option.name;
			this.type = option.type;
			this.user = uni.getStorageSync('userInfo')
			if (window.location.href.indexOf('isShare=true') !== -1) {
				this.isSharePage = true
				this.shoreId = option.userid
			}
			// this.setShare()

		},
		onReady() {
			jssdk.initJssdk()
			this.getList()
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif

		},
		onShow() {
			this.$refs.ShareModal.loadCard()
		},
		onHide() {
			uni.hideLoading()
		},
		watch: {
			playTime(val, up) {
				if (val == 0) {
					// uni.showLoading({
					// 	title: "加载中..."
					// })
				} else {
					setTimeout(() => {
						uni.hideLoading()
					}, 1000)
				}
			}
		},

		methods: {
			loadedmetadata(e) {
				this.playTime = e.detail.duration
			},
			setShare() {
				let shareId = uni.getStorageSync('userInfo').id
				this.SpmResult = share.setShareInfo({
					title: this.name,
					desc: this.shoreDesc,
					image: this.shorePic,
					params: {
						page: 2,
						pageId: this.id,
						shareId: shareId
					}
				});

				// let link = window.location.href + '&isShare=true&userid='+ shareId+ '&' + this.SpmResult.query
				let url = window.location.href.split('&')
				let link = url[0] + url[1] + url[2] + '&isShare=true&userid=' + shareId + '&' + this.SpmResult.query
				jssdk.share({
					title: this.title,
					desc: this.shoreDesc,
					// link:encodeURIComponent(link),
					link: link,
					imgUrl: this.shorePic,
					type: '4',
					id: this.id
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			playVideo() {},
			radioChange(evt) {
				this.chosedValue = evt.detail.value
			},
			buy() {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.post({
					url: '/book/createOrder',
					data: {
						level_id: this.videoInfo.cartoon_pcategory_id
					},
					// contentType: 'application/json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// dataType:'json',
					success: res => {
						console.log(res);
						this.order = res.orderid
						this.$refs.SureSubmit.close()
						this.$refs.SureSubmits.open()
						uni.hideLoading()
					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: error.data.msg,
							icon: 'error'
						})
					}
				})
			},
			sure() {
				uni.showLoading({
					title: '加载中'
				})
				console.log(uni.getStorageSync('openid'));
				this.$api.post({
					url: '/book/payOrder',
					data: {
						type: this.chosedValue,
						orderid: this.order,
						method: this.chosedValue == 'wechat' ? 'mp' : 'scan'
					},
					// contentType: 'application/json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// dataType:'json',
					success: res => {
						if (this.chosedValue == 'wechat') {
							jssdk.wxpay({
								data: res
							})
							// this.judgeWxPay()
						} else {
							this.$refs.payPopup.open()
							this.$refs.SureSubmits.close()
							uQRCode.make({
								canvasId: 'qrcode',
								componentInstance: this,
								text: res.qr_code,
								size: 180,
								margin: 5,
								backgroundColor: '#ffffff',
								foregroundColor: '#000000'
							})


						}

						this.judgeIsPay()
						uni.hideLoading()
					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: error.data.msg,
							icon: 'error'
						})
					}
				})
			},
			judgeIsPay() {
				var timer = setInterval(() => {
					this.$api.post({
						url: '/book/orderStatus',
						data: {
							orderid: this.order
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},

						success: res => {
							if (res.status == '1') {
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								})
								uni.createVideoContext('myVideo').play()
								this.$refs.payPopup.close()
								this.$refs.SureSubmits.close()
								this.$refs.SureSubmit.close()
								this.alreadyBuy = 1
								clearInterval(timer)
								uni.hideLoading()
							}

						},
						fail: error => {
							console.log(error)

						}
					})

				}, 1000)

			},
			jumpAd(val) {
				console.log(val)
				this.hideAd = val
			},
			playTimes(e) {
				var currentime = e.detail.currentTime
				// let ads = this.videoInfo.news_list
				// ads.forEach(item => {

				// 	if (Number(item.seconds) <= currentime && this.hideAd) {
				// 		uni.createVideoContext('myVideo').pause()
				// 		uni.createVideoContext('myVideo').exitFullScreen()
				// 		// this.$refs.adModal.showModal(item)
				// 		return
				// 	}
				// })


				if (currentime >= this.freeTime && this.alreadyBuy == 0 && this.videoInfo.cartoon_info.money !== '0') {
					this.$refs.SureSubmit.open()
					uni.createVideoContext('myVideo').pause()
				}
			},
			getList() {
				const that = this
				console.log(this.id)
				// let url = this.type == 'courses' ? '/course/detail' : this.type == 'study' ? '/study/detail' : ''
				let vm = this
				vm.$api.post({
					url: '/cartoon/detail',
					data: {
						id: vm.id
					},
					// contentType: 'application/json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// dataType:'json',
					success: res => {
						console.log(res);
						that.shoreDesc = res.desc
						that.detailInfo = res.content
						that.shorePic = res.image
						vm.videoInfo = res
						vm.title = res.name
						vm.srcs = res.cartoon_files[0].video_url.PlayInfoList.PlayInfo[2].PlayURL
						vm.alreadyBuy = res.is_buy
						that.freeTime = res.seconds

						this.setShare()

						// 		this.AllList = res.list;

					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: error.data.msg,
							icon: 'error'
						})

						setTimeout(() => {

							if (vm.isSharePage) {
								uni.navigateTo({
									url: '/pages/user/auth/auth'
								})
							} else {
								vm.$wanlshop.back(1)
							}

						}, 1500)
					}
				})
				if (this.playTime == 0 && this.$u.os()!="ios") {
					setTimeout(() => {
						uni.showLoading({
							title: "视频加载中...",
							mask: true
						})
					}, 1000)

				}
			},



			videoErrorCallback() {

			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 28rpx;

		#myVideo {
			width: 100%;
			height: 422rpx;
		}
	}
	/deep/.uni-video-bar{
		z-index: 100;
	}
	
	.head-top {
		position: absolute;
		height: 60rpx;
		width: 60rpx;
		top: 20rpx;
		left: 20rpx;
		color: #fff;
		.image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	
	.detail-info{
		margin: 20rpx 20rpx;
		min-height: 100rpx;
		padding: 20rpx;
	}
	
	.video-infor {
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		min-width: 250rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 30rpx;
		z-index: 99;
		padding-left: 30rpx;
	
		.left {
			background-color: #aed0fd;
			color: #333;
			padding: 10rpx;
			border-radius: 120rpx;
			// margin-left: 10rpx;
			// padding-right: 80rpx;
	
			text {
				display: block;
				font-size: 18rpx;
				line-height: 25rpx;
				margin-left: 50rpx;
			}
		}
	
		.right {
			position: absolute;
			left: 0;
			border-radius: 50%;
			overflow: hidden;
			bottom: 0;
			width: 80rpx;
			height: 80rpx;
	
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}
	
	.video-infor-2 {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		min-width: 300rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 30rpx;
		z-index: 99;
		padding-left: 30rpx;
	
		.left {
			background-color: #aed0fd;
			color: #333;
			padding: 10rpx;
			border-radius: 120rpx;
			margin-right: 10rpx;
			// padding-right: 80rpx;
	
			text {
				display: block;
				font-size: 18rpx;
				line-height: 25rpx;
				margin-left: 0rpx;
			}
		}
	
		.right {
			position: absolute;
			right: 0;
			border-radius: 50%;
			overflow: hidden;
			bottom: 0;
			width: 80rpx;
			height: 80rpx;
	
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.floatcontainer {
		width: 630rpx;
		height: 320rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 400rpx auto;
		padding-top: 72rpx;
	}

	.floatcontainer2 {
		width: 630rpx;
		height: 630rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 400rpx auto;

		.title {
			font-size: 40rpx;
			padding-bottom: 100rpx;
		}
	}

	.text {
		margin: 0 auto 88rpx;
		text-align: center;
	}

	.btnContainer {
		display: flex;
		justify-content: space-around;
		margin: 60rpx 0;

		button {
			width: 100px;
			height: 30px;
			background: #fff;
			font-size: 13px;
			font-family: PingFang-SC-Medium-, PingFang-SC-Medium;
			font-weight: normal;
			color: #333333;
		}
	}

	.changeCardBtn {
		width: 538rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		box-shadow: 0px 2px 5px 0px rgba(30, 36, 34, 0.3);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		bottom: 30rpx;
		margin: auto;
		left: 0;
		right: 0;
	}
</style>
